<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图书管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书信息添加</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-steps :active="Number(activeTab)" simple>
        <el-step title="信息完善" icon="el-icon-s-order"></el-step>
        <el-step title="作者完善" icon="el-icon-s-custom"></el-step>
        <el-step title="出版完善" icon="el-icon-upload"></el-step>
        <el-step title="描述完善" icon="el-icon-picture"></el-step>
      </el-steps>
      <el-row :gutter="20" class="content-row">
        <el-col :span="16">
          <el-form :model="form" :rules="rules" ref="form" size="small">
            <el-tabs tab-position="left" v-model="activeTab" :before-leave="beforeLeave">
              <el-tab-pane label="书籍信息" name="0">
                <el-form-item label="书籍ISBN" prop="b_isbn">
                  <el-input v-model="form.b_isbn"></el-input>
                </el-form-item>
                <el-form-item label="书籍名称" prop="b_title">
                  <el-input v-model="form.b_title"></el-input>
                </el-form-item>
                <el-form-item label="书籍价格" prop="b_price">
                  <el-input v-model="form.b_price"></el-input>
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="书籍作者" name="1">
                <el-form-item label="作者名称" prop="b_author">
                  <el-input v-model="form.b_author"></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="书籍出版" name="2">
                <el-form-item label="出版社" prop="b_publisher">
                  <el-input v-model="form.b_publisher"></el-input>
                </el-form-item>
                <el-form-item label="出版时间" prop="b_publisher_time">
                  <el-date-picker
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM"
                    v-model="form.b_publisher_time"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="书籍描述" name="3">
                <el-form-item label="书籍的简要描述" prop="b_desc">
                  <el-input
                    type="textarea"
                    placeholder="请输入书籍的简要描述...."
                    v-model="form.b_desc"
                    maxlength="30"
                    show-word-limit
                    rows="12"
                  ></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm">添加图书</el-button>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </el-col>
        <el-col :span="8">
          <img src="../../assets/imgs/book.jpg" alt/>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {book, status} from "../../request";

export default {
  data() {
    return {
      form: {},
      rules: {
        b_title: [{required: true, message: "*必填"}],
        b_author: [{required: true, message: "*必填"}],
        b_publisher: [{required: true, message: "*必填"}],
        b_publisher_time: [{required: true, message: "*必填"}],
        b_price: [
          {required: true, message: "*必填", trigger: "blur"},
          {
            type: "number",
            message: "必须为数字",
            trigger: "blur",
            transform: value => Number(value)
          }
        ],
        b_isbn: [{required: true, message: "*必填"}],
        b_desc: [{required: true, message: "*必填"}]
      },
      activeTab: "0"
    };
  },
  methods: {
    beforeLeave(activeName, oldActiveName) {
      if (oldActiveName == 0) {
        if (!this.form.b_title || !this.form.b_isbn || !this.form.b_price) {
          this.$message.error("请完善书籍的信息");
          return false;
        }
        return true;
      }
      return true;
    },
    submitForm() {
      this.$refs.form.validate(async valid => {
        if (!valid) return this.$message.error("请完善书籍表单的内容");
        const data = await book.add(this.form);
        if (data.code == status.SUCCESS) {
          this.$message.success(data.msg);
          this.activeTab = 0;
          this.$refs.form.resetFields();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-row {
  margin-top: 50px;
}

.el-tab-pane {
  text-align: left;
}
</style>
